<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%
	String contextRoot = request.getContextPath();
%>
<f:loadBundle basename="properties.messages" var="msg" />
<f:view>
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!-- Mimic Internet Explorer 7 -->
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7,chrome=1">
	
	<title>SISDEP : Sistema de Informaci<h:outputText value="#{msg.tilde_o}" />n de Espacio P<h:outputText value="#{msg.tilde_u}" />blico</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="stylesheet" href="<%=contextRoot%>/css/validationEngine.jquery.css" type="text/css">
	<link rel="stylesheet" href="<%=contextRoot%>/css/template.css" type="text/css">
	<link rel="stylesheet" href="<%=contextRoot%>/css/normalize.css">
	<link rel="stylesheet" href="<%=contextRoot%>/css/uniform.css"> <!-- estilos formularios -->
	<link rel="stylesheet" href="<%=contextRoot%>/css/cuerpo.css">	
	<link rel="stylesheet" href="<%=contextRoot%>/css/richCustom.css">
	
</head>
<body>
<div id="marco"> <!--inicio contenedor --> 
<div class="arriba-cuerpo"></div> <!-- Para ver borde redondo en IE -->
<div class="cuerpo">
<a href="<%=contextRoot%>/index.jsf"><img src="<%= contextRoot %>/images/logos.png" /></a>
<div class="clear"></div>
<!-- Menu y Usuario init() -->
	<%@ include file="include/menuUsuario.jsp" %>
<!-- Menu y Usuario end() -->
<div class="clear"></div>
<!-- Formulario --> 
<div id="buscador">
<h2>
    Gesti<h:outputText value="#{msg.tilde_o}" />n de Operativos: <h:outputText value="#{operativoController.operativo.actualizacionStr eq 'N' ? 'NUEVO' : 'EDICION'}" />
</h2>

<h:form id="operativoManageForm">
<span class="left" style="margin-left:0px">
<label>Servicio o Cuadrante<span class="asterisco"> * </span></label>
	<h:selectOneMenu id="square" styleClass="validate[required]"
					value="#{operativoController.operativo.cuadrante}">

        <f:selectItem itemLabel="Seleccione..." itemValue=""/>
        <f:selectItems value="#{masterListCache.squareList}"/>
    </h:selectOneMenu>
</span>
<span class="left" style="margin-left:30px">
<label>Coordinador Encargado<span class="asterisco"> * </span></label>
	<h:selectOneMenu id="coordinador" styleClass="validate[required]"
					value="#{operativoController.operativo.coordinador}">

        <f:selectItem itemLabel="Seleccione..." itemValue=""/>
        <f:selectItems value="#{operativoController.recursoHumanoList}"/>
    </h:selectOneMenu>
</span>

<div class="clear" style="margin-left: 400px;"></div>
<br/>

<span class="left" style="margin-left:0px">
<label>Tipo de Operativo<span class="asterisco"> * </span></label>
	<h:selectOneMenu id="operativeType" styleClass="validate[required]"
					value="#{operativoController.operativo.idTipoOperativo}">

        <f:selectItem itemLabel="Seleccione..." itemValue=""/>
        <f:selectItems value="#{masterListCache.operativeType}"/>
    </h:selectOneMenu>
</span>
<span class="left" style="margin-left:30px">
<label>Fecha Operativo<span class="asterisco"> * </span></label>
 	<h:inputText id="operativeDate" styleClass="validate[required, custom[date]] operativeDate" size="10" maxlength="10"
			value="#{operativoController.operativo.fechaOperativo}">
			<f:convertDateTime pattern="dd/MM/yyyy"/>
	</h:inputText>
</span>
<span class="left" style="margin-left:30px">
<label>Turno</label>
	<h:inputText id="operativeJourney" size="10" maxlength="20" 
				value="#{operativoController.operativo.turno}" />
</span>

<div class="clear" style="margin-left: 400px;"></div>
<br/>

<a4j:outputPanel rendered="#{operativoController.operativo.actualizacionStr eq 'S'}">
<span class="left" style="margin-left:0px">
<label>Estado<span class="asterisco"> * </span></label>
	<h:selectOneMenu id="operativeStatus" styleClass="validate[required]" 
					value="#{operativoController.operativo.estado}">

        <f:selectItem itemLabel="Seleccione..." itemValue=""/>
        <f:selectItems value="#{operativoController.operativoStatusList}"/>
    </h:selectOneMenu>
</span>
<span class="left" style="margin-left:30px">
<label>Metros Recuperados</label>
	<h:inputText id="recoveredMeters" size="10" maxlength="20" 
				value="#{operativoController.operativo.metrosRecuperados}" />
</span>

<div class="clear" style="margin-left: 400px;"></div>
<br/>
</a4j:outputPanel>

<span class="left" style="margin-left:0px">
	<label>Direcci<h:outputText value="#{msg.tilde_o}" />n Operativo<span class="asterisco"> * </span></label>

	<h:inputText id="operativeAddress" size="60" maxlength="100" styleClass="validate[required]"
				value="#{operativoController.operativo.direccionOperativo}" />     
		
	<a4j:commandButton id="checkAddressButton"
					 styleClass="botonsmall"
	                 type="submit" 
	                 value="Verificar..." ajaxSingle="true" 
	                 ondblclick="return false;" reRender="checkAddressPanel"
                     action="#{operativoController.checkAddress}" >
                     
		             <a4j:actionparam name="addressParam" value="document.getElementById('operativoManageForm:operativeAddress').value" 
		                              assignTo="#{operativoController.operativo.direccionOperativo}" noEscape="true" />
	</a4j:commandButton>
</span>
<div class="clear" style="margin-left: 400px;"></div>

<span class="left" style="margin-left:0px">
<label>
<a4j:outputPanel id="checkAddressPanel" layout="block" >
	<h:panelGrid columns="1" style="text-align: left;" styleClass="tablapaginacion" >
		<h:outputText id="comunaLabel" 
						value="Barrio: #{operativoController.operativo.codigoBarrio}-#{operativoController.operativo.barrio}" />
		<h:outputText id="barrioLabel" 
						value="Comuna: #{operativoController.operativo.codigoComuna}-#{operativoController.operativo.comuna}" />
    </h:panelGrid>
</a4j:outputPanel>
</label>
</span>

<div class="clear" style="margin-left: 400px;"></div>

<span class="left" style="margin-left:0px">
<label>Descripci<h:outputText value="#{msg.tilde_o}" />n</label>
 	<h:inputTextarea id="descripcion" rows="5" cols="70"  styleClass="validate[maxSize[100]]"
				value="#{operativoController.operativo.descripcion}" />
</span>

<br/>
<div class="clear">(<span class="asterisco"> * </span>) : Campo Obligatorio.</div>
<div class="clear"></div>

<span class="botones right">
	<h:commandButton id="operativeCreateButton"
				 type="submit" 
                 value="Guardar" 
                 rendered="#{operativoController.operativo.actualizacionStr eq 'N'}" 
                 ondblclick="return false;" 
                 styleClass="botonsmall"
                 action="#{operativoController.create}" >
	</h:commandButton>
	<h:commandButton id="operativeUpdateButton"
				 type="submit" 
                 value="Actualizar" 
                 rendered="#{operativoController.operativo.actualizacionStr eq 'S'}" 
                 ondblclick="return false;" 
                 styleClass="botonsmall"
                 action="#{operativoController.update}" >
	</h:commandButton>
</span>
</h:form>
</div>
<!-- Fin formulario -->
 
<div class="clear"></div>

<!-- Fin tabla -->
</div>
<div class="abajo-cuerpo"></div> <!-- Para ver borde redondo en IE -->
</div> <!-- Fin contenedor -->
<div class="footer"></div>
	
	<script src="<%=contextRoot%>/js/jquery/lib/jquery-1.7.2.min.js"></script><!-- De ser 1ro -->
	<script src="<%=contextRoot%>/js/script.js" type="text/javascript"></script><!-- De ser 2do -->
	<script src="<%=contextRoot%>/js/jquery/lib/jquery.uniform.min.js"></script> <!-- formularios --> 
	<script src="<%=contextRoot%>/js/jquery/lib/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
	<script src="<%=contextRoot%>/js/jquery/lib/jquery.validationEngine-es.js" type="text/javascript" charset="utf-8"></script>
	<script src="<%=contextRoot%>/js/jquery.maskedinput-1.3.js" type="text/javascript"></script>
	<script src="<%=contextRoot%>/js/sisdep.js"	type="text/javascript"></script>
	
	<script type="text/javascript">
	jQ(document).ready(function() {
		jQ("input, select, input:checkbox, input:radio, input:file").uniform();
		jQ("#operativoManageForm").validationEngine('attach');
		jQ("#operativoManageForm").bind("jqv.form.result", function(event, errorFound) {
	        if(!errorFound) displayLoadingImage();
	    });
		
		jQ(".operativeDate").mask("99/99/9999");
	});
	</script>
	
	<%@ include file="include/validationStatus.jsp" %>
	<%@ include file="include/modalMessageWindow.jsp" %>
</body>
</html>
</f:view>